<template>
  <el-dialog :visible="matchVisible"
             title="合约匹配记录"
             :before-close="close"
             width="56%"
             top="16vh"
             :close-on-click-modal="false"
             append-to-body>
    <div class="pad20">
      <el-table :data="feeData"
                class="mb25"
                style="width: 100%">
        <template v-for="(item, index) in feeColumn">
          <el-table-column :key="index"
                           :prop="item.name"
                           :label="item.label"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span :class="item.name==='totalFee'?'totalSty':''">
                {{ scope.row[item.name] 
                ? (item.type != 'total' ? formatNumber(scope.row[item.name]) : scope.row[item.name]) 
                : 0 }}
              </span>
              <el-tooltip v-if="scope.row.minimumFee && item.name === 'totalFee'"
                          placement="top"
                          effect="light">
                <div slot="content">最低费用匹配说明：<br /> {{tips}}</div>
                <icon-svg class-name="iconClass ml12"
                          icon-name="bangzhuzhongxin1" />
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="mb15">
        合约匹配明细
        <el-tooltip placement="top"
                    effect="light">
          <div slot="content">
            1、(零担费或整车费+提货费+送货费+装卸费)>最低收费,<br />
            合约报价=零担费或整车费+提货费+送货费+装卸费+保险费+税费<br />
            {{tipsA}}<br />
            合约报价=最低收费+保险费+税费<br />
            注:<br />
            保险费=货物总价值*税费<br />
            税费=(零担费+提货费+送货费+装货费+装卸费+保费)*税率<br />
            {{tipsB}}<br />
          </div>
          <icon-svg class-name="iconClass"
                    icon-name="bangzhuzhongxin1" />
        </el-tooltip>
      </div>
      <el-table :data="record"
                max-height="300"
                class="mb25"
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <template v-for="(item, index) in recordColumn">
          <el-table-column v-if="item.type === 'templateNo'"
                           :key="index"
                           :prop="item.type"
                           :label="item.label"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <link-detail :value="scope.row.templateNo"
                           :row="scope.row"
                           :url="`newQuotation`"
                           :params-data="paramsData"
                           :link-type="1"
                           :copy-visable="false"
                           :custom="custom"
                           v-bind="$attrs" />
            </template>
          </el-table-column>
          <el-table-column v-else
                           :key="index"
                           :prop="item.type"
                           :label="item.label"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>{{ scope.row[item.type] || '--' }}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div v-if="description.length"
           class="detail-info">
        <template v-for="(item, i) in description">
          <div :key="i">{{i+1}}. {{item}}</div>
        </template>
      </div>
      <p>补充费明细</p>
      <el-table :data="supplementList"
                max-height="300"
                style="width: 100%">
        <template v-for="(item, index) in supplementColumn">
          <el-table-column :key="index"
                           :prop="item.name"
                           :label="item.label"
                           :width="item.name==='remarks'?`360px`:``"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div :class="item.label==='补充费用'?'totalSty':''">
                {{ scope.row[item.name] 
                ? (item.name === 'money' ? formatNumber(scope.row[item.name]) : scope.row[item.name]) 
                : (item.name === 'money' ? 0 : '--')}}
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { quotation } from "@/api/index";
import LinkDetail from "@components/table/column/LinkColumn.vue";
export default {
  name: "QuoteMatchingDetail",
  components: { LinkDetail },
  props: {
    matchVisible: {
      type: Boolean,
      default: false
    },
    matchId: {
      type: Number,
      default: null
    },
    matchColumn: {
      type: Array,
      default: () => []
    },
    matchData: {
      type: Array,
      default: () => []
    },
    surchargeFees: { // 补充费用数据源
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      tipsA: `2、(零担费或整车费+提货费+送货费+装卸费)<最低收费,`,
      tipsB: `如果(零担+提货+送货+装货+装卸)<最低收费,则税费=(最低收费+保费)*税率`,
      tips: `（零担/整车+提货费+送货费+装货费+卸货费）< 最低费用，订单匹配合约最低费用合计=最低费用+附加费+保险费+税费`,
      supplementColumn: [
        { label: "费用项", name: "typeName" },
        { label: "备注信息", name: "remarks" },
        { label: "补充费用", name: "money" },
      ],
      record: [], //匹配记录
      recordColumn: [
        { label: "匹配时间", type: "matchAt" },
        { label: "匹配方式", type: "modeName" },
        { label: "报价单编号", type: "templateNo" },
        { label: "合约编号", type: "code" },
        { label: "合约名称", type: "name" },
      ],
      paramsData: ["templateId"],
      custom: {
        status: null
      },
      description: []
    };
  },
  computed: {
    formatNumber () {
      return num => num ? Number(num).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') : 0;
    },
    feeColumn () {
      return JSON.parse(JSON.stringify(this.matchColumn));
    },
    feeData () {
      return this.matchData || [];
    },
    supplementList () {
      return this.surchargeFees || [];
    }
  },
  created () {
    this.getMatch();
  },
  methods: {
    // 合约匹配明细
    async getMatch () {
      const { data } = await quotation.getMatch(this.matchId);
      this.record = [{ ...data }]
      this.custom.status = data.status
      this.description = data?.description ? data?.description.split("\r\n") : []
    },
    // 取消
    close () {
      this.$emit("update:matchVisible", false);
    },
  }
};
</script>

<style lang="scss" scoped>
.pad20 {
  padding: 10px 20px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb25 {
  margin-bottom: 25px;
}
.detail-info {
  margin-top: 20px;
  line-height: 26px;
}
.ml12 {
  margin-left: 12px;
}
.totalSty {
  color: var(--prev-color-primary) !important;
}
</style>
